<script setup lang="ts">
import { ref } from 'vue'
import u4 from '@/assets/下载 (4).png'


const result = ref('');

const dataresult = ref('');
const showPicker = ref(false);
const showdataPicker = ref(false);
const columns = [
    { text: '男', value: 'nan' },
    { text: '女', value: 'nv' },
];

const onConfirm1 = ({ selectedOptions }) => {
    result.value = selectedOptions[0]?.text;
    showPicker.value = false;
};

const onConfirm2 = ({ selectedValues }) => {
    dataresult.value = selectedValues.join('/');
    showdataPicker.value = false;
};


const message = ref('')

</script>


<template>
    <div class="container">
        <header class="navtop">
            <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" z-index="99" fixed :border="false"
                safe-area-inset-top />
        </header>

        <main>
            <div class="user">
                <van-image class="photo" round width="1rem" height="1rem" fit="cover" :src="u4" />
                <van-uploader>
                    <h1 style="font-size: 16px;">点击更改头像</h1>
                </van-uploader>
               
            </div>

            <div class="content">
                <van-cell-group class="bot col" inset>
                    <van-field class="col" v-model="value" label="用户名" placeholder="请输入用户名" />
                </van-cell-group>

                <van-field class="bot col" v-model="result" is-link readonly name="picker" label="性别" placeholder="点击选择性别"
                    @click="showPicker = true" />
                <van-popup v-model:show="showPicker" position="bottom">
                    <van-picker :columns="columns" @confirm="onConfirm1" @cancel="showPicker = false" />
                </van-popup>

                <van-field class="bot col" v-model="dataresult" is-link readonly name="datePicker" label="生日" placeholder="完善生日信息"
                    @click="showdataPicker = true" />
                <van-popup v-model:show="showdataPicker" position="bottom">
                    <van-date-picker @confirm="onConfirm2" @cancel="showdataPicker = false" />
                </van-popup>


                <van-cell-group class="bot col" inset>
                    <van-field class="col" v-model="message" label="邮箱" placeholder="请输入邮箱" />
                </van-cell-group>

            </div>
        </main>
    </div>
</template>

<style lang="scss">
.container {
    padding: 0 5%;
}

.navtop {
    height: 100px;

    .van-nav-bar {
        --van-nav-bar-icon-color: #1b1b1b;
        --van-nav-bar-background: rgbr(0, 0, 0, 0);
    }
}
.user {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}
.van-cell-group {
    margin: 0;
}
.bot {
    margin-bottom: 20px;
    
}
.col {
    background-color: rgba($color: #000000, $alpha: 0);
}
</style>